<template>
  <div class='box'>
    <div class='title'>
      <div class='el-icon-arrow-left' @click='$router.go(-1)'></div>
      <div>支付方式</div>
      <div class='title_right_size'></div>
    </div>
    <div class='saoyisao_box'>
      <div class='saoyisao'>
        <!-- <img class='sao_img_topleft' src='../../../../assets/static/scan/3.png' alt=''>
				<img class='sao_img_topright' src='../../../../assets/static/scan/6.png' alt=''>
				<img class='sao_img_downleft' src='../../../../assets/static/scan/5.png' alt=''>
				<img class='sao_img_downright' src='../../../../assets/static/scan/2.png' alt=''>
				<img class='sao_center' src='../../../../assets/static/scan/4.png' alt=''> -->
        <canvas
          :width='canvasWidth'
          :height='canvasHeight'
          id='canvas'
          v-show='showCanvas'
          ref='canvasElement'
        ></canvas>

        <div id='output' v-if='showCanvas'>
          <div v-if='!outputData'>No QR code detected.</div>
          <div v-else>
            <b>Data:</b>
            <span id='outputData'>{{ outputData }}</span>
          </div>
        </div>

        <el-button type='primary' @click='openScan'>开启扫描</el-button>
      </div>
    </div>
    <div class='select_img'>选择图片</div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
// import adapter from 'webrtc-adapter'
// WebRTC适配器 只需要引入就ok
import jsQR from 'jsqr'
/**
 * jsqr demo
 */

export default {
  data: () => ({
    video: document.createElement('video'),
    loadingMessage:
      '🎥 Unable to access video stream (please make sure you have a webcam enabled)',
    // 是否显示摄像头
    showCanvas: true,
    canvas2d: undefined,
    outputData: undefined,
    canvasWidth: 250,
    canvasHeight: 250,
  }),
  destroyed() {
    this.closeCamera()
  },
  methods: {
    openScan() {
      const videoParam = {
        audio: false,
        video: { facingMode: { exact: 'environment' } },
      }
      console.log(this.video)
      navigator.mediaDevices
        .getUserMedia(videoParam)
        .then((stream) => {
          this.$message(stream)
          this.video.srcObject = stream
          this.video.setAttribute('playsinline', true) // required to tell iOS safari we don't want fullscreen
          this.video.play()
          requestAnimationFrame(this.tick)
        })
        .catch((err) => {
          console.log('+++++++++++', err)
        })
    },
    // 关闭摄像头
    closeCamera() {
      if (this.video.srcObject) {
        this.video.srcObject.getTracks().forEach(function (track) {
          track.stop()
        })
      }
    },
    tick() {
      this.loadingMessage = '⌛ Loading video...'
      if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
        // this.showCanvas = true
        this.canvasHeight = this.video.videoHeight
        this.canvasWidth = this.video.videoWidth
        !this.canvas2d &&
        (this.canvas2d = this.$refs.canvasElement.getContext('2d'))
        this.canvas2d.drawImage(
          this.video,
          0,
          0,
          this.canvasWidth,
          this.canvasHeight
        )
        var imageData = this.canvas2d.getImageData(
          0,
          0,
          this.canvasWidth,
          this.canvasHeight
        )
        var code = jsQR(imageData.data, imageData.width, imageData.height, {
          inversionAttempts: 'dontInvert',
        })
        if (code) {
          this.drawLine(
            code.location.topLeftCorner,
            code.location.topRightCorner,
            '#FF3B58'
          )
          this.drawLine(
            code.location.topRightCorner,
            code.location.bottomRightCorner,
            '#FF3B58'
          )
          this.drawLine(
            code.location.bottomRightCorner,
            code.location.bottomLeftCorner,
            '#FF3B58'
          )
          this.drawLine(
            code.location.bottomLeftCorner,
            code.location.topLeftCorner,
            '#FF3B58'
          )
          this.outputData = code.data
          console.log(code.data)
          // this.closeCamera()
          // return
        } else {
          this.outputData = undefined
        }
      }
      requestAnimationFrame(this.tick)
    },
    drawLine(begin, end, color) {
      this.canvas2d.beginPath()
      this.canvas2d.moveTo(begin.x, begin.y)
      this.canvas2d.lineTo(end.x, end.y)
      this.canvas2d.lineWidth = 4
      this.canvas2d.strokeStyle = color
      this.canvas2d.stroke()
    },
  },
}
</script>
<style lang='scss' scoped>
.box {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100vh;

  /* 标题 */
  .title {
    background-color: #7ac91b;
    color: #fff;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    font-weight: bold;

    .el-icon-arrow-left {
      float: left;
      margin-top: 5px;
    }

    .title_right_size {
      font-size: 12px;
      font-weight: normal;
    }
  }

  .saoyisao_box {
    background-color: #fff;
    margin: auto;
    margin-top: 25%;
    width: 250px;
    height: 250px;

    .saoyisao {
      width: 100%;
      height: 100%;
      position: relative;
      .sao_img_topleft {
        position: absolute;
        left: -2.5px;
        top: -2.5px;
      }
      .sao_img_topright {
        position: absolute;
        right: -2.5px;
        top: -2.5px;
      }
      .sao_img_downleft {
        position: absolute;
        left: -2.5px;
        bottom: -2.5px;
      }
      .sao_img_downright {
        position: absolute;
        right: -2.5px;
        bottom: -2.5px;
      }
      .sao_center {
        margin-top: 50%;
      }
    }
  }

  .select_img {
    background-image: url(../../../../assets/static/scan/1.png);
    background-repeat: no-repeat;
    background-size: 100%;
    text-align: center;
    font-size: 15px;
    color: #ffffff;
    font-weight: bold;
    width: 243px;
    padding: 20px 0 30px 0;
    margin: 20% auto;
  }
}
.v-body {
  font-family: 'Ropa Sans', sans-serif;
  color: #333;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
#githubLink {
  position: absolute;
  right: 0;
  top: 12px;
  color: #2d99ff;
}
h1 {
  margin: 10px 0;
  font-size: 40px;
}
#loadingMessage {
  text-align: center;
  padding: 40px;
  background-color: #eee;
}
#canvas {
  width: 100%;
}
#output {
  margin-top: 20px;
  background: #eee;
  padding: 10px;
  padding-bottom: 0;
}
#output div {
  padding-bottom: 10px;
  word-wrap: break-word;
}
#noQRFound {
  text-align: center;
}
</style>
